<template>
  <div class="container flex-column">
    <div class="tool-box  flex-between">
      <div class="left flex-box">
        <div class="flex-box">
          <span>设备名称</span>
          <el-input type="text" v-model="query.deviceName"></el-input>
        </div>
        <div class="flex-box ">
          <span>采集时间</span>
          <el-date-picker
            v-model="query.daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </div>

      </div>
      <div class="right flex-box">
        <el-button plain icon="el-icon-download" @click="exprotClick">导出</el-button>
        <el-button plain icon="el-icon-search" @click="page.currentPage = 1;onLoad(page)">搜索</el-button>
        <el-button plain  type="danger" icon="el-icon-delete" @click="searchReset">清空</el-button>
      </div>

    </div>
    <div class="m-table" >

      <el-table header-cell-class-name="table-header"
                height="250"
                row-class-name="pointer"
                v-loading="loading"
                @row-click="rowClick"
                :data="data" stripe
                style="width: 100%">
        <el-table-column
          type="index"
          width="100"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名称"
        >
        </el-table-column>
        <el-table-column
          prop="temperature"
          label="温度"
        >
        </el-table-column>
        <el-table-column
          prop="humidity"
          label="湿度"
        >
        </el-table-column>
        <el-table-column
          prop="pressure"
          label="压力"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="采集时间"
        >
        </el-table-column>

      </el-table>
      <div class="page">
        <el-pagination
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
    <div class="charts m-table flex-column">
      <div class=" chart-name">{{chartName}}</div>
      <div class=" charts" id="env-charts">

      </div>
    </div>

  </div>
</template>
<script>
  import {getList,getEnvChart,exportData} from "../../api/platform/enviroment";
  import {lineOption} from "../../config/chartOption";
  import moment from 'moment'
  import _ from 'lodash'
  import {downloadExportFile} from "../../util/util";
  import {getToken} from "../../util/auth";

  export default {
    name:'enviroment',
    data(){
      return{
        query:{},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        data: [],
        deviceTypeList:[],
        regionList:[],
        chart:null,
        chartName:''
      }
    },
    methods:{
      exprotClick(){

        let url = `/api/blade-platform/data/export?blade-auth=${getToken()}&deviceType=1`
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          url+=`&startCreateTime=${this.query.daterange&&this.query.daterange[0]}&endCreateTime=${this.query.daterange&&this.query.daterange[1]}`
        }
        window.open(url);
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
        this.onLoad(this.page)
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      rowClick(row){
        this.chartName = row.deviceName;
        this.getChart(row.deviceId)
      },
      onLoad(page) {
        this.loading = true;
        let params = {}
        Object.assign(params, this.query,{deviceType:1})
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          params.startCreateTime = this.query.daterange[0]
          params.endCreateTime = this.query.daterange[1]
        }
        getList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.list||[];
          this.loading = false;
          if(this.data.length){
            this.chartName = this.data[0].deviceName
            this.getChart(this.data[0].deviceId)
          }
        });

      },

      getSeries(name,color,data){
        return{
          name,
          type:'line',
          symbolSize: 0,
          data,
          lineStyle: {
            normal: {
              color: color, // 线条颜色
            },
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: color
              },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0)'
                }
              ], false),
              shadowBlur: 0
            }
          },
          itemStyle : {
            color: color,
            borderColor:color,
            borderWidth: 3,
          }
        }
      },
      getChart(id){
        let params = {
          deivceId:id,
          ...this.query,
        }
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          params.startCreateTime = this.query.daterange[0]
          params.endCreateTime = this.query.daterange[1]
        }
        delete params.daterange
        getEnvChart(params).then(res=>{
          res = res.data.data.list||[]
          let option = _.cloneDeep(lineOption);
          let xAxis = [],legend =['温度','湿度','压力'],colors = ['#FFB346','#59CE75','#14C2D6'],tempData = [],huData = [],preData = [];
          res.forEach(o=>{
            xAxis.push(moment(o.createTime).format('MM-DD HH:mm'));
            tempData.push(o.temperature);
            huData.push(o.humidity)
            preData.push(o.pressure)
          })
          option.xAxis.data = xAxis;
          option.legend.data = legend;
          option.series = [
            this.getSeries('温度','#FFB346',tempData),
            this.getSeries('湿度','#59CE75',huData),
            this.getSeries('压力','#14C2D6',preData),
          ]
          this.chart = this.$echarts.init(
            document.getElementById(`env-charts`)
          )
          this.chart.setOption(option,true)
        })
      }
    },
    mounted() {
      this.onLoad(this.page)

    }
  }
</script>
<style scoped lang="scss">
  .m-table{
    flex: none;
  }
  .charts{
    flex: 1;
    height: 0;
    position: relative;
    .chart-name{
      padding-left: 20px;
      font-weight: bold;
    }
    #env-charts{
      flex: 1;
      height: 0;
    }
  }
</style>
